<template>
	<view class="pageZ">
		<up-navbar title="" :autoBack="true" safeAreaInsetTop placeholder>
		</up-navbar>
		<view class="article">
			<view class="box">
				<view class="box-tit s-flex-r-s-c">
					<image class="icon" src="../../static/img/index/i7.png" mode=""></image>
					<view class="tit s-flex-r-s-c">
						<text>{{art1.title}}</text>
					</view>
				</view>
				<view class="content" v-html="art1.content"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from "vue";
	const {
		proxy
	} = getCurrentInstance();
	const lineBg =
		"";
	const tab2list = ref([]);
	const tab2 = ref(0);
	const params = ref({
		page: 1,
		per_page: 10,
	});
	const indexList = ref([]);

	function getTabData() {
		proxy
			.$request({
				url: "api/consult/consultSort",
				header: "application/x-www-form-urlencoded",
				data: {},
			})
			.then((res) => {
				if (res.code == 0) {
					return proxy.$toast(res.msg);
				} else {
					tab2list.value = res.data.list;
					tab2.value = tab2list.value[0].id;
					getListData();
				}
			});
	}
	getTabData();

	function getListData() {
		proxy
			.$request({
				url: "api/consult/consultManage",
				header: "application/x-www-form-urlencoded",
				data: {
					consult_sort_id: tab2.value,
					page: params.value.page,
					per_page: params.value.per_page,
				},
			})
			.then((res) => {
				if (res.code == 0) {
					return proxy.$toast(res.msg);
				} else {
					indexList.value = res.data.list;
				}
			});
	}

	function tabHandle2(i) {
		tab2.value = i.id;
		getListData();
	}
	const onLoad = () => {
		loadmore();
	};

	const scrolltolower = () => {
		loadmore();
	};

	const loadmore = () => {};

	function handleDetail(item) {
		uni.navigateTo({
			url: `/pages/zixun/details?id=${item.id}&title=${item.name}`,
		});
	}

	const art1 = ref({});

	function getSingleData() {
		proxy
			.$request({
				url: "api/consult/single",
				header: "application/x-www-form-urlencoded",
				data: {
					// 1用户协议,2隐私协议3商会介绍4会员介绍 6港中盈的介绍内容
					type_id: 6,
				},
			})
			.then((res) => {
				if (res.code == 0) {
					return proxy.$toast(res.msg);
				} else {
					art1.value = res.data.details;
				}
			});
	}
	getSingleData();
</script>

<style lang="scss" scoped>
	.pageZ {
		background: #f8f8f8;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.list {
		width: 100%;
		padding: 10rpx 32rpx 30px;
		box-sizing: border-box;
		// background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 20rpx;

		.time {
			text-align: center;
			color: #999;
			font-size: 24rpx;
			margin-bottom: 20rpx;
		}

		.box {
			background: #fff;
			padding-bottom: 30rpx;

			.imgBox {
				position: relative;
				height: 272rpx;

				.img {
					width: 100%;
					height: 272rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					position: absolute;
				}

				.title {
					position: absolute;
					color: #fff;
					bottom: 0;
					padding: 0 30rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
					overflow: hidden;
					margin-bottom: 20rpx;
				}
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				box-sizing: border-box;
				padding-bottom: 0;

				.desc {
					line-height: 48rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.bottomImg {
					width: 104rpx;
					height: 104rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					flex-shrink: 0;
					margin-left: 20rpx;
				}
			}
		}
	}

	.article {
		margin-top: 18rpx;
		background: #ffffff;
		padding: 50rpx 32rpx;

		.box {
			.box-tit {
				margin: 8rpx 0;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}

				.tit {
					font-weight: 800;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					width: 184rpx;
					height: 84rpx;
					background: url(https://oss.bigchun.com/img/gangzhongying/index-i-bg.png) 74rpx 0rpx no-repeat;
					background-size: 124rpx 84rpx;
				}
			}

			.content {
				padding: 10rpx 0;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 44rpx;
				text-align: left;
			}
		}
	}
</style>